<template>
  <div class="alphabet">
    <div class="item" v-for="(item,key) in cities"
     :key="key"
     @click="handleLetterClick"
     @touchstart="handleTouchStart"
     @touchmove="handleTouchMove"
     @touchend="handleTouchEnd"
     :ref="key">
        {{key}}
      </div>
  </div>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props:{
    cities:Object
  },
  data(){
      return {
        touchStatus: false
      }
    },
  methods:{
      //  实现Alphabet组件与List非父子组件之间的通信，需要父组件转为两者中转方
      handleLetterClick(e){
        console.log('你点击的字符是：',e.target.innerText)
        // 步骤一：兄弟组件1发送change，并传入参数e.target.innerHTML，而后需要在父组件City中监听该事件
        this.$emit('change',e.target.innerText)   //innerHTML报错未定义时，
        // 解决，在div中写这个key的时候留有换行符，所以你需要在template中把这个换行符去掉，或者使用e.target.innerText。
      },
      handleTouchStart(){
        this.touchStatus=true
      },
      handleTouchMove(e){
        if(this.touchStatus){
          // 函数节流优化性能
          const startY = this.$refs['A'][0].offsetTop
          console.log(startY)
          const touchY = e.touches[0].clientY  - 85
          // console.log(touchY)
          const index = Math.floor(touchY-startY)/20
          console.log(index)
          this.$emit('change',this.letters[index])
        }
      },
      handleTouchEnd(){
        this.touchStatus=false
      }
  },
  computed:{
    letters(){
      // 创建一个数组，存储['A','B'...]，用于循环
      var letters=[]
      for(let i in this.cities){
        letters.push(i)
      }
      return letters   // ['A','B']
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/css/varibles.styl'
.alphabet 
    position absolute
    top 1.7rem
    right 0
    bottom  0
    width .4rem
    display flex
    flex-direction column  //可以将文字变成一列
    justify-content  center //可以让子元素居中显示
    .item 
        text-align center
        line-height .4rem
        color $bgColor
</style>